<template>
  <a-modal
    :title="formTile + '权限'"
    :visible="true"
    width="50%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card v-if="showTable">
        <a-row style="margin-bottom: 10px">
          <a-col :span="24">
            <a-form
              layout="inline"
              :form="form"
              @submit="handleSubmit"
            >
              <a-form-item label="姓名">
                <a-input
                  allow-clear
                  placeholder="请输入姓名"
                  v-decorator="['name']"
                ></a-input>
              </a-form-item>
              <a-form-item label="工号">
                <a-input
                  allow-clear
                  placeholder="请输入工号"
                  v-decorator="['jobNumber']"
                ></a-input>
              </a-form-item>
              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                >搜索</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <a-table
          bordered
          :row-selection="{ selectedRowKeys: selectedRowKeys,selectedRows:selectedRows, onChange: onSelectChange,type:'radio' }"
          :columns="columns"
          :loading="loading"
          :data-source="dataList"
        />

      </a-card>
      <a-card style="margin-top:5px">
        <a-form
          :form="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          @submit="beforeSubmit"
        >
          <!-- <a-form-item label="密码">
            <a-input
              allow-clear
              placeholder="请输入密码"
              :maxLength="40"
              v-model="password"
            />
          </a-form-item> -->
          <a-form-item label="角色">
            <a-checkbox-group
              style="width: 100%;"
              v-model="roleIdList"
            >
              <a-row>
                <a-col
                  :span="8"
                  v-for="item in roleList"
                  :key="item.roleId"
                >
                  <a-checkbox :value="item.roleId">
                    {{ item.roleName }}
                  </a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>
          <a-row>
            <a-col
              :span="24"
              :style="{ textAlign: 'right' }"
            >
              <a-button @click="reset">
                取消
              </a-button>
              <a-button
                :style="{ marginLeft: '8px' }"
                type="primary"
                html-type="submit"
              >
                保存
              </a-button>

            </a-col>

          </a-row>

        </a-form>

      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
const columns = [
  {
    title: '姓名',
    dataIndex: 'name'
  },
  {
    title: '账号',
    dataIndex: 'email'
  },
  {
    title: '工号',
    dataIndex: 'jobNumber'
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  }
]
const brandList = ['JNBY HOME', 'A PERSONAL NOTE 73', 'LESS', 'jnby by JNBY', 'jnby for mini', 'Pomme de terre', 'JNBY', '速写']
export default {
  components: {},

  props: {
    accountId: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      urlKey: 'basemgt-material/',
      labelCol: { span: 2 },
      wrapperCol: { span: 20 },
      columns,
      loading: true,
      brand: [],
      accountInfo: {},
      form: this.$form.createForm(this),
      dataList: [],
      selectedRowKeys: [],
      selectedRows: [],
      password: '',
      groupId: '',
      roleList: [],
      roleIdList:[],
      showTable: false
    }
  },

  created() {
    const { accountId } = this.$props
    if (accountId) {
      this.formTile = '编辑'
      this.getDetail()
    } else {
      this.formTile = '新增'
      this.showTable = true
    }
    this.loadData()
    this.getRoleList()
  },
  mounted() {},
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.loadData()
    },
    reset() {
      this.$emit('close')
    },
    beforeSubmit(e) {
      e.preventDefault()
      this.submit()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      console.log(this.selectedRows)
    },
    getDetail() {
      const params = {
        accountId: this.accountId
      }
      try {
        postAction(`${this.urlKey}account/info`, params).then(res => {
          if (res.code == 200) {
            this.accountInfo = res.data
            res.data.roleList.map((item)=>{
              this.roleIdList.push(item.roleId)
            })
          } else {
            this.$message.warning(res.msg)
          }
        })
      } catch (error) {
        this.$message.warning('获取详情失败！')
      }
    },
    getRoleList() {
      const data = {}
      try {
        postAction(`${this.urlKey}role/full`, data).then(data => {
          if (data.code == 200) {
            this.roleList = data.data
          } else {
            this.$message.warning(data.msg)
          }
          this.loading = false
        })
      } catch (error) {
        this.loading = false
      }
    },
    getQueryParams() {
      const params = this.form.getFieldsValue()
      return {
        ...params
      }
    },
    loadData() {
      var data = this.getQueryParams()
      try {
        postAction(`${this.urlKey}account/employee/search`, data).then(data => {
          if (data.code == 200) {
            this.dataList = data.data.records
            this.form.resetFields()
          } else {
            this.$message.warning(data.msg)
          }
          this.loading = false
        })
      } catch (error) {
        this.loading = false
      }
    },
    submit() {
      if (this.showTable && this.selectedRows.length == 0) {
        this.$message.warning('请选择账号的用户！')
      } else {
        const params = {
          name: this.showTable ? this.selectedRows[0].name : this.accountInfo.name,
          account: this.showTable ? this.selectedRows[0].email : this.accountInfo.account,
          jobNumber: this.showTable ? this.selectedRows[0].jobNumber : this.accountInfo.jobNumber,
          password: this.showTable ? this.selectedRows[0].jobNumber : this.accountInfo.jobNumber,
          mobile: this.showTable ? this.selectedRows[0].mobile : this.accountInfo.mobile,
          roleIdList:this.roleIdList
        }
        if(!this.showTable){
          params.accountId = this.accountId
        }
        const FNCName = this.showTable ? `${this.urlKey}account/save` : `${this.urlKey}account/update`
        try {
          postAction(FNCName, params).then(res => {
            if (res.code == 200) {
              this.$message.success(this.accountId ? '编辑成功！' : '新增成功！')
              this.reset()
            } else {
              this.$message.warning(res.msg)
            }
          })
        } catch (error) {
          this.$message.warning('操作失败！')
        } finally {
          this.loading = false
        }
      }
    }
  }
}
</script>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
.ml-20 {
  margin-left: 20px;
}
</style>